<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-tab" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel icon="chrome" title="template">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel icon="firefox" title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel icon="safari" title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="tab1">tab1</ph-tab-panel>
      <ph-tab-panel title="tab2">tab2</ph-tab-panel>
      <ph-tab-panel title="tab3">tab3</ph-tab-panel>
      <ph-tab-panel title="tab4">tab4</ph-tab-panel>
      <ph-tab-panel title="tab5">tab5</ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhTab, PhTabPanel, PhView, PhBlockquote } from "@/index";
import * as Data from "../data/tab";
export default defineComponent({
  components: {
    PhTab,
    PhTabPanel,
    PhView, PhBlockquote,
  },
  setup() {
    return { ...Data };
  },
});
</script>
